<template>
  <div class="container">
    <el-card class="box-card" shadow="always">
      <div slot="header" class="header">
        <el-button
          type="primary"
          @click="goBack"
          style="margin: 20px 20px 0 20px"
          >返回</el-button
        >
        <span>基本信息</span>
      </div>
      <div class="content">
        <div class="mx">
          设备名称：<span>{{ queryObj.deviceName }}</span>
        </div>
        <div class="mx">
          出厂日期：<span>{{ queryObj.manufactureTime }}</span>
        </div>
        <div class="mx">
          设备系列号:<span>{{ queryObj.deviceVersion }}</span>
        </div>
        <div class="mx">
          出场标识:<span>{{ queryObj.deviceMark }}</span>
        </div>
      </div>
      <div class="content">
        <div class="mx">
          固件版本号:<span>{{ queryObj.deviceType }}</span>
        </div>
        <div class="mx">
          设备升级方式:<span>{{ queryObj.isForce }}</span>
        </div>
        <div class="mx"></div>
        <div class="mx"></div>
      </div>
      <div class="mx-ms">
        模型版本号：<span>{{ queryObj.modelDes }}</span>
      </div>
    </el-card>
    <el-card class="box-card" shadow="always">
      <div slot="header" class="header">
        <span>设备模型</span>
      </div>
      <div v-if="queryObj.deviceType == 1">
        <el-button type="primary" @click="saveParams">保存</el-button>
        <global-card>
          <template #content>
            <el-table
              v-loading="loading"
              :data="tableData"
              border
              style="width: 100%"
              class="elTable"
              ref="tableRef"
            >
              <el-table-column
                type="index"
                label="序号"
                width="80"
                align="center"
              />
              <el-table-column
                prop="parameterCode"
                label="参数代码"
                align="center"
              />
              <el-table-column
                prop="modelName"
                label="模型名称"
                align="center"
              />

              <el-table-column prop="messages" label="参数值" align="center">
                <template #default="{ row }">
                  <el-input v-model="row.messages" />
                </template>
              </el-table-column>
              <!-- <el-table-column label="操作" width="300" align="center">
                <template #default="{ row }">
                  <el-button
                    type="danger"
                    size="mini"
                    @click="handlerDelete(row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column> -->
            </el-table>
          </template>
        </global-card>
      </div>
      <div v-if="queryObj.deviceType == 0">
        <global-card>
          <template #content>
            <el-table
              v-loading="loading"
              :data="tableData"
              border
              style="width: 100%"
              class="elTable"
              ref="tableRef"
            >
              <el-table-column
                type="index"
                label="序号"
                width="80"
                align="center"
              />
              <el-table-column
                prop="parameterCode"
                label="参数代码"
                align="center"
              />
              <el-table-column
                prop="parameterName"
                label="参数名称"
                align="center"
              />

              <el-table-column
                prop="parameterType"
                label="参数类型"
                align="center"
              >
                <template #default="{ row }">
                  <div>
                    {{
                      row.parameterType == 0
                        ? "数值类型"
                        : row.parameterType == 1
                        ? "状态参数"
                        : "枚举"
                    }}
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </global-card>
      </div>

      <yc-dialog
        ref="ycDialog"
        :dialogTitle="dialogTitle"
        :centerTitle="dialogCenterTitle"
      >
        <template #content>
          <div class="dialog-content">
            <el-form :model="newQuipmentModel" label-width="100px">
              <el-form-item label="设备参数名称">
                <el-input v-model="newQuipmentModel.parameterName" />
              </el-form-item>

              <el-form-item label="参数代码">
                <el-input v-model="newQuipmentModel.parameterCode" />
              </el-form-item>
              <!-- <el-form-item label="倍数">
                <el-input v-model="newQuipmentModel.multiple" />
              </el-form-item>

              <el-form-item label="单位">
                <el-input v-model="newQuipmentModel.unit" />
              </el-form-item> -->
              <!-- <el-form-item label="读写类型">
                <el-select disabled="true" v-model="newQuipmentModel.modelDes">
                  <el-option
                    v-for="item in projectTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item> -->
            </el-form>
          </div>
        </template>
        <template #footer>
          <el-button type="primary" @click="dialogSave">确定</el-button>
          <el-button @click="$refs.ycDialog.dialogVisible = false"
            >取消
          </el-button>
        </template>
      </yc-dialog>
      <global-message
        v-if="isGlobalMessageShow"
        @receive="receive"
        :message="message"
      />
    </el-card>
  </div>
</template>
<script>
import { updateDevice } from "@/api/clientOrObject/device"
import {
  selectDeviceById,
  queryParametersPageByDevice
} from "@/api/clientOrObject/device"
import {
  queryPageDeviceSedModelParameter,
  updateDeviceSedModelParameter,
  deleteDeviceSedModelParameter,
  insertDeviceSedModelParameter
} from "@/api/modelManagement/ProtocolMessageDetail"

import ycDialog from "@/components/pageDialog"
export default {
  data() {
    return {
      tableData: [],
      formatDate: "yyyy-MM-dd",
      count: 0,
      projectTypeOptions: [
        {
          label: "私人客户",
          value: "私人客户"
        },
        {
          label: "高能耗客户",
          value: "高能耗客户"
        },
        {
          label: "学校客户",
          value: "学校客户"
        }
      ],
      searchOptions: [
        {
          label: "类型一",
          value: "1"
        },
        {
          label: "类型二",
          value: "2"
        },
        {
          label: "类型三",
          value: "3"
        }
      ],
      searchForm: {
        searchInput: "",
        searchSelectValue: ""
      },
      newQuipmentModel: {
        parameterName: "",
        multiple: "",
        unit: "",
        parameterCode: "",
        // modelDes: "",
        id: ""
      },
      detailsDisabled: false,
      isGlobalMessageShow: false,
      dialogCenterTitle: "",
      dialogTitle: "",
      message: "",
      pageIndex: 1,
      pageSize: 20,
      loading: false,
      queryObj: {}
    }
  },
  components: {
    ycDialog
  },
  created() {
    this.queryObj = this.$route.query
    console.log(this.queryObj, "this.queryObj ")
    this.getPageProject()
    // const { modelName, modelType, modelVersion, modelDes } = row
  },
  methods: {
    async saveParams(pageIndex = 1, pageSize = 20) {
      let str = ""
      this.tableData.forEach((e) => {
        str += e.parameterCode + "&" + e.messages + "_"
      })
      str = str.substring(0, str.length - 1)
      console.log(str, "str")
      const { status } = await updateDevice({
        id: this.queryObj.id,
        deviceType: this.queryObj.deviceType,
        messages: str,
        modelCode: this.queryObj.modelCode
      })
      if (status == 200) {
        this.isGlobalMessageShow = true
        this.message = "success"
        this.getPageProject()
      } else {
        this.message = "error"
      }
    },
    goBack() {
      this.$router.go(-1)
    },
    async getPageProject(pageIndex = 1, pageSize = 20) {
      this.loading = true
      // projectType
      const { searchInput, searchSelectValue } = this.searchForm
      const { object } = await queryParametersPageByDevice({
        deviceId: this.queryObj.id,
        deviceType: this.queryObj.deviceType,
        modelCode: this.queryObj.modelCode,
        pageIndex,
        pageSize
      })
      // 数据还需要再确认确认
      console.log(object)
      this.count = object.count || 0
      this.tableData = object.data
      this.loading = false
    },

    async searchClick() {
      this.getPageProject(1, 20)
    },
    async dialogSave() {
      this.$refs.ycDialog.dialogVisible = false
      if (this.detailsDisabled) {
        // 详情
        this.$refs.ycDialog.dialogVisible = false
      } else if (this.newQuipmentModel.modelName && this.newQuipmentModel.id) {
        //  编辑
        const { status } = await updateDeviceSedModelParameter({
          ...this.newQuipmentModel,
          modelCode: this.queryObj.modelCode
        })

        if (status == 200) {
          this.isGlobalMessageShow = true
          this.message = "success"
          this.getPageProject()
        } else {
          this.message = "error"
        }
      } else {
        this.insertDeviceModelFun()
        this.getPageProject()
      }
      this.getPageProject()
    },
    receive() {
      this.isGlobalMessageShow = false
    },
    dateChange(dateItem) {
      console.log(dateItem, this.searchForm)
    },

    selectChange() {
      console.log("aaa")
    },
    pagination(pageItem) {
      this.getPageProject(pageItem.page, pageItem.limit)
    },
    refresh() {
      Object.keys(this.searchForm).forEach((item) => {
        this.searchForm[item] = ""
      })
      this.getPageProject()
    },
    handlerEdit(row) {
      this.$refs.ycDialog.dialogVisible = true
      this.detailsDisabled = false
      this.dialogCenterTitle = "编辑设备详情"
      this.dialogTitle = "设备详情"
      this.newQuipmentModel = row
      this.newQuipmentModel.id = row.id
    },
    handlerDelete({ id }) {
      this.$confirm("确定删除此用户吗", "删除操作", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
        center: true
      }).then(async () => {
        const { status } = await deleteDeviceSedModelParameter({
          id,
          modelCode: this.queryObj.modelCode
        })
        if (status == 200) {
          console.log(id)
          this.getPageProject()
          this.isGlobalMessageShow = true
          this.message = "success"
        } else {
          this.message = "error"
        }
      })
    },
    newQuipmentClick() {
      this.dialogCenterTitle = "新建设备模型"
      this.dialogTitle = "设备详情"
      this.$refs.ycDialog.dialogVisible = true
      this.newQuipmentModel = {}
      this.detailsDisabled = false
    },
    async insertDeviceModelFun() {
      const { status } = await insertDeviceSedModelParameter({
        ...this.newQuipmentModel,
        modelCode: this.queryObj.modelCode
      })
      if (status == "200") {
        this.isGlobalMessageShow = true
        this.message = "success"
      } else {
        this.isGlobalMessageShow = true
        this.message = "error"
      }
    },
    async updateDeviceModelFun() {}
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  .box-card {
    // box-shadow: 10px 0px 8px rgba(0, 0, 0, 0.9);
    margin-bottom: 20px;
    .header {
      span {
        font-weight: 800;
        font-size: 20px;
      }
    }
    .content {
      display: flex;
      padding: 0 20px;
      .mx {
        flex: 1;
        font-weight: 600;
        font-size: 18px;
        padding: 30px 0;
        span {
          font-weight: 400;
        }
      }
    }
    .mx-ms {
      padding: 0 20px;
      font-weight: 600;
      font-size: 18px;
      span {
        font-weight: 400;
      }
    }
    .title-container {
      display: flex;
      // justify-content: flex-end;
      margin-right: 20px;

      .left-box {
        display: flex;

        .formClass {
          display: flex;
          margin-right: 20px;
          .el-form-item {
            margin-top: 20px;
            margin-bottom: 0;
            .el-input {
              width: 216px;
            }
            .el-select {
              width: 171px;
              margin-left: 10px;
            }
            .el-date-editor {
              width: 336px;
              margin-left: 10px;
            }
          }
        }
        .el-button {
          // width: 42px;
          height: 36px;
          margin-top: 20px;
        }
      }
    }
  }
}
</style>
